<template>
  <div>
    <h2>音乐播放界面</h2>
    <p>音乐的id:{{id}}</p>
    <!-- 渲染音乐--H5  -->
    <audio :src="song" controls></audio>
    <!-- vue-aplayer渲染音频 -->
    <!--     <aplayer :music="audio[0]" :list="audio"  :showlrc="true"></aplayer> -->
    <aplayer :music="{...music}" :showlrc="true"></aplayer>

  </div>
</template>

<script>
import axios from "../../api";
import aplayer from "vue-aplayer";
export default {
  props: ["id"],
  components: {
    aplayer
  },
  data() {
    return {
      song: "", //
      music: {
          url:'',
          title:'向云端',
          artist:'向云端',
          lrc:'[00:00.00] (,,•́ . •̀,,) 刚刚开始学钢琴弹的hhhh'
      }
    };
  },
  methods: {
    async getSongUrl() {
      let res = await axios.getSongUrl();
      console.log("音乐信息---", res.data);
      console.log(res.data.data[0].url);
      this.song = res.data.data[0].url;
      this.music.url=res.data.data[0].url;
      //this.$set()
    },
    async getSongText() {
      let res = await axios.getSongText();
      console.log("音乐歌词---", res.data);
      console.log("音乐歌词---", res.data.lrc.lyric);
      this.music.lrc=res.data.lrc.lyric
    }
  },
  mounted() {
    this.getSongUrl();
    this.getSongText();
  }
};
</script>

<style scoped lang='less'>
// less  深层穿透  操作三方css或者是深层的css 
/deep/.aplayer .aplayer-body{
    display: -webkit-box;
    display: -ms-flexbox;
     display: block;
    position: relative;
}
</style>